
<style>
body{
background:transparent;
width:100vw;
height:100vh;
overflow:hidden;}

.sparkles {
  position: absolute;
  top: 0;
width:100vw;
height:100vh;
  z-index: 0;
}
@media (min-width: 700px) {
  .sparkles {
    height:  20px;
  }
}

.sparkle {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: block;
  height: 30px;
  width: 30px;
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  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  animation-name: sparkle;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0;
}

.sparkle--small {
  height: 75px;
  width: 75px;
}

.sparkle--left {
  animation-name: sparkleLeft;
}

@keyframes sparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  3% {
    transform: scale(1) rotate(15deg);
    opacity: 0.8;
  }
  6% {
    transform: scale(1) rotate(15deg);
    opacity: 0.8;
  }
  9% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
}
@keyframes sparkleLeft {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  3% {
    transform: scale(1) rotate(-15deg);
    opacity: 0.8;
  }
  6% {
    transform: scale(1) rotate(-15deg);
    opacity: 0.8;
  }
  9% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(0deg);
    opacity: 0.8;
  }
}
/*
* Unrelated... but pretty like.
*/
body {
  margin: 0;
}

.section--sparkles {
  min-height: 400px;
  width: 100%;
}

 
</style>

 


</head>

<body translate="no" >
  <section class="section section--sparkles">
  <div class="sparkles"></div>
 
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script   >
var sparkleTime = function ($) {

  var $container = $('.sparkles'),
  $sparkle = $('<div class="sparkle"></div>'),
  totalSparkles,
  sparkleDelayRange = 10;

  if (window.matchMedia('(max-width: 730px)').matches) {
    totalSparkles = 30;
  } else {
    totalSparkles = 100;
  }

  function init() {
    sprinkleSparkles();
  }

  function sprinkleSparkles() {
    for (var i = 0; i < totalSparkles; i++) { 
      var size = i % 2 === 0 ? 'sparkle--small' : '';
      var direction = i % 3 === 0 ? 'sparkle--left' : '';
      $sparkle.
      clone().
      css({
        top: Math.random() * 100 + '%',
        left: Math.random() * 100 + '%',
        webkitAnimationDelay: Math.random() * sparkleDelayRange + 's',
        AnimationDelay: Math.random() * sparkleDelayRange + 's' }).

      addClass(size).
      addClass(direction).
      appendTo($container);
    } 
  }

  return {
    init: init };

}(jQuery);

sparkleTime.init();

    </script>
